<template>
	<view class="box-view">
		<navBar title="每日班前交底"  @goBack="uni.navigateBack()"></navBar>
		<view class="tabs">
			<view @click="changeTabsItem('fill-report')" :class="[active === 'fill-report' ? 'selected' : '']"
				class="tabs-item">发起填报</view>
			<view @click="changeTabsItem('fill-record')" :class="[active === 'fill-record' ? 'selected' : '']"
				class="tabs-item">
				<view class="point">
					<text>填报记录</text>
					<text v-if="fillRecordNotUploadCount">{{fillRecordNotUploadCount}}</text>
				</view>
			</view>
		</view>
		<fill-report ref="component-child" @refreshFillRecordNotUploadCount="handleGetFillRecordNotUploadCount"
			:type="type" v-if="active==='fill-report'"></fill-report>
		<fill-record ref="component-child" @refreshFillRecordNotUploadCount="handleGetFillRecordNotUploadCount"
			:type="type" v-if="active==='fill-record'"></fill-record>
		<!-- <component ref="component-child" @refreshFillRecordNotUploadCount="handleGetFillRecordNotUploadCount"
			:type="type" :is="active" /> -->
	</view>
</template>
<script>
	import fillReport from "./components/fill-report.vue";
	import fillRecord from "./components/fill-record.vue";
	import {
		getFillRecordNotUploadCount
	} from "@/api/engineeringMaintenance/engineeringMaintenance.js";

	export default {
		name: "daily-metasomatic",
		components: {
			fillReport,
			fillRecord,
		},
		data() {
			return {
				// 当前激活的组件
				active: "fill-report",
				// 是否正在加载中..
				isLoading: false,
				// 统计未上传的需填报记录数量
				fillRecordNotUploadCount: 0,
				// 当前页面的类型 - 0: 综合大修下的  1: 工程维保下的
				type: 0,
			}
		},
		onLoad(options) {
			this.type = parseInt(options.type);
			this.handleGetFillRecordNotUploadCount();
		},
		async onShow() {
			if (this.$refs["component-child"]) {
				if (this.active === 'fill-report') {
					this.$refs["component-child"].showDataByOtherPage();
				} else if (this.active === 'fill-record') {
					this.$refs["component-child"].paging.pageNum = 1;
					this.$refs["component-child"].fillRecordArray = await this.$refs["component-child"]
						.getFillRecordArray();
					this.handleGetFillRecordNotUploadCount();
				}
			}
		},
		methods: {
			/** 切换tabs的页签 */
			changeTabsItem(data) {
				this.active = data;
				if (data === "fill-record") {
					this.handleGetFillRecordNotUploadCount();
				}
			},

			/** 获取统计未上传的需填报记录数量 */
			handleGetFillRecordNotUploadCount() {
				if (!this.isLoading) {
					this.isLoading = true;
					getFillRecordNotUploadCount({
						objType: this.type === 1 ? "gcwb" : "zhdx",
						projectId: uni.getStorageSync("isOwner")
					}).then(res => {
						this.fillRecordNotUploadCount = res.result;
					}).finally(() => {
						this.isLoading = false;
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.box-view {
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
	}
	.required {
		&::before {
			content: "*";
			color: #ff6a6a;
		}
	}

	.tabs {
		line-height: 50upx;
		background: #fff;
		color: #445469;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 36upx;
		font-weight: 500;
		border-top: 15px solid #f5f7fa;
		height: 55px;

		.tabs-item {
			border-bottom: 1px solid #e1e5ed;
			padding-bottom: 8upx;
			padding-top: 48upx;
			flex: 1;
			height: 100%;
			box-sizing: border-box;
		}

		.selected {
			color: #2f80ed;
			border-color: #2f80ed;
			font-weight: 800;
		}

		.point {
			position: relative;

			>text {
				&:nth-of-type(2) {
					width: 32upx;
					height: 32upx;
					background: #ff6a6a;
					border-radius: 50%;
					color: #fff;
					position: absolute;
					font-weight: 500;
					font-size: 28upx;
					text-align: center;
					line-height: 32upx;
					transform: translate(-15%, -20%);
				}
			}
		}
	}

	.container {
		box-sizing: border-box;
		background: #f5f7fa;
		font-size: 32upx;
	}
</style>